import { View } from '@tarojs/components';
import classnames from 'classnames';
import { TIME_LIST } from '@/utils/utils';
import dayjs from 'dayjs';
import './index.scss';

interface IProps {
  onChange: (time: string) => void;
  active: any;
}

// const timeList = [
//   {
//     id: 1,
//     title: '上午',
//     name: '08:00-12:00',
//   },
//   {
//     id: 2,
//     title: '下午',
//     name: '14:00-16:00',
//   },
// ];

export default function ({ onChange = () => {}, active }: IProps) {
  const _onChange = (time: any) => {
    onChange?.(time);
  };
  return (
    <View className="appointment-time-list">
      {TIME_LIST.map((item) => {
        return (
          <View key={item.id}>
            <View className="day-tag">{item.title}</View>
            <View className="time-list-container">
              <View
                className={classnames('time-item', item.id === active.id ? 'active' : '')}
                onClick={() => _onChange(item)}
              >
                <View className="time-str">{item.name}</View>
                <View className="time-text">{item.id === active.id ? '已预约' : '可预约'}</View>
              </View>
            </View>
          </View>
        );
      })}
    </View>
  );
}
